<div data-role="view" data-title="Maybanhang.Net" id="product-edit" data-layout="mobile-view"  data-reload="true"
data-show="load" > 
	<script type="text/javascript">
		var productId;			
		function load(e) {	
			app.showLoading();	
			var id = e.view.params.id;	
			productId = id;	
			if (!id) return;
			$.ajax({
			  type: "GET",
			  url: "service/product/" + id,		 
			  dataType : 'json', 
			  async: false,
			}).done(function( data ) {	
				app.hideLoading();			
			  $('#productCode_edit').val(data.productCode);
			  
			  $('#productName_edit').val(data.productName);
			  $('#price_edit').val(data.price);
			  $('#defaultCategoryId_edit').val(data.defaultProductCategoryId);
			  $('#defaultUnitId_edit').val(data.defaultProductUnitId);
			  $('#description_edit').val(data.description);	
			  $('#productImage_edit').attr('src','site/productImage/' + data.productId);	
			  
			});	
			
		}
	</script>
    <header data-role="header">
        <div data-role="navbar">
            <a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a>
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href='#index'>Home</a>            
        </div>
    </header>    
    <img id='productImage_edit' style="margin-left: auto; margin-right: auto;display: block;width:256px;height: 256px;"></img>
    
    
    <form id="picture" enctype="multipart/form-data">
        
       <label id="select_file_label" class="bottom" style="margin: 0px auto;">Chọn ảnh
        <input name="photo" class="" type="file" id="select_file" ></input>
	</label>
        
    <a class="button" data-role="button" style="display: block; margin: 2em; text-align: center;" data-click="delete_product_click">Xóa ảnh</a>
    
    
    <input id="image_change" type="hidden" />
    <ul data-role="listview" data-style="inset">
    	<li>
    		<label>
    			Mã
    			 <input type="text"  id='productCode_edit'/>
    		</label>    		    				
    	</li>
    	<li>
    		<label>
    			Tên
    			 <input type="text"  id='productName_edit'/>
    		</label>
    	</li>
    	<li>
    		<label>
    			Giá bán
    			 <input type="text" id='price_edit'/>
    		</label>    		
    	</li>
    	<li>
    		<label>
    			Nhóm
    			<select id='defaultCategoryId_edit'>
    					<?php
    						$ezRestApi = new EzRestApi();	
							$accountId = UserInformation::getAccountId();
							$locationId = UserInformation::getLocationId();	
							$categories = $ezRestApi->getProductCategories($accountId, $locationId);
							reset($categories);
							while(list(,$value)=each($categories)) {
								echo "<option value='".$value['productCategoryId']."'>".$value['categoryName']."</option>";											
							}
    					?>
                 </select>
    		</label> 
    	</li>
    	<li>
    		<label>
    			Đơn vị
    			<select id='defaultUnitId_edit'>
                        <?php    						
							$units = $ezRestApi->getProductUnits($accountId, $locationId);
							reset($units);
							while(list(,$value)=each($units)) {
								echo "<option value='".$value['productUnitId']."'>".$value['unitName']."</option>";											
							}
    					?>
                 </select>
            </label>
    		
    	</li>
    	<li>
    		<label>
    			Mô tả
    			 <input type="text"  id='description_edit'/>
    		</label> 
    	</li>    	
    </ul>    
    </form>
    <a class="button" data-role="button" style="display: block; margin: 2em; text-align: center;" data-click="save_product_click">Lưu</a>
    
  	<script>
	    function save_product_click(e) {
	    	
	        product = {
	        	"ProductId":productId,
				"ProductName":$('#productName_edit').val(),
				"ProductCode":$('#productCode_edit').val(),
				"Price":$('#price_edit').val(),
				"Description":$('#description_edit').val(),
				"DefaultProductCategoryId":$('#defaultCategoryId_edit').val(),
				"DefaultProductUnitId":$('#defaultUnitId_edit').val(),
                                "Image":$('#image_change').val(),
			};
			
			$.ajax({
			  type: "PUT",
			  url: "service/product/save" ,		 
			  dataType : 'json', 
			  data:JSON.stringify(product),
			  async: false,
			}).done(function( data ) {			
			  app.navigate("#:back");
			});	
			
	    }
            </script>
            <script>
            function delete_product_click(e) {
	    	alert('run delete');
	        product = {
	        	"ProductId":productId,
                        "Image":$('#image_change').val(),
                        "Status":"1",
			};
			$.ajax({
			  type: "PUT",
			  url: "service/product/deleteImage" ,
			  dataType : 'json', 
			  data:JSON.stringify(product),
			  async: false,
			}).done(function( data ) {			
			  app.navigate("#:back");
			});	
			
	    }
            
	 </script>
            <script>
		if (typeof window.FileReader === 'undefined') {
			  $("#select_file_label").hide();
		} 
		$("#select_file").change(function() {
				
			  var file = $("#select_file")[0].files[0];			  
			  var reader = new FileReader();
			  reader.onload = function (event) {
			   	$('#productImage_edit').attr('src',event.target.result);
                                $('#image_change').val(event.target.result);
                                
                                //alert(event.target.result);
                                alert('run update image');
                                
                                //process update iamge
                                //
                                
                                        product = {
                                        "ProductId":productId,
                                        "Image":$('#image_change').val(),
                                        "Status":"0",
                                        };
                                        $.ajax({
                                          type: "PUT",
                                          url: "service/product/saveImage" ,		 
                                          dataType : 'json', 
                                          data:JSON.stringify(product),
                                          async: false,
                                        }).done(function( data ) {			
                                          app.navigate("#:back");
                                        });
                                
                                // end process
			  };
			  reader.readAsDataURL(file);
		  //alert('Handler for .change() called.');
		  //$('#productImage_edit').attr('src','site/productImage/' + data.productId);	
		});
//                
//                $('#select_file').bind('change', function() {
//
//                //this.files[0].size gets the size of your file.
//                alert('Size :'+this.files[0].size);
//                alert('Name :'+$(this).val());
//                alert('href :'+$(this).attr('src'));
//            
//                });
	</script>
</div>